<!DOCTYPE html>
<!-- Template Name: Clip-Two - Responsive Admin Template build with Twitter Bootstrap 3.x | Author: ClipTheme -->
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html lang="en">
	<!--<![endif]-->
	<!-- start: HEAD -->
	<head>
		<title>Clip-Two - Responsive Admin Template</title>
		<!-- start: META -->
		<!--[if IE]><meta http-equiv='X-UA-Compatible' content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta content="" name="description" />
		<meta content="" name="author" />
		<!-- end: META -->
		<!-- start: GOOGLE FONTS -->
		<link href="http://fonts.googleapis.com/css?family=Lato:300,400,400italic,600,700|Raleway:300,400,500,600,700|Crete+Round:400italic" rel="stylesheet" type="text/css" />
		<!-- end: GOOGLE FONTS -->
		<!-- start: MAIN CSS -->
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap-rtl.min.css">
		<link rel="stylesheet" href="vendor/fontawesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="vendor/themify-icons/themify-icons.min.css">
		<link href="vendor/animate.css/animate.min.css" rel="stylesheet" media="screen">
		<link href="vendor/perfect-scrollbar/perfect-scrollbar.min.css" rel="stylesheet" media="screen">
		<link href="vendor/switchery/switchery.min.css" rel="stylesheet" media="screen">
		<!-- end: MAIN CSS -->
		<!-- start: CLIP-TWO CSS -->
		<link rel="stylesheet" href="assets/css/styles.css">
		<link rel="stylesheet" href="assets/css/plugins.css">
		<link rel="stylesheet" href="assets/css/themes/theme-1.css" id="skin_color" />
		<link rel="stylesheet" href="assets/css/rtl.css"/>
		<!-- end: CLIP-TWO CSS -->
		<!-- start: CSS REQUIRED FOR THIS PAGE ONLY -->
		<link href="vendor/ladda-bootstrap/ladda-themeless.min.css" rel="stylesheet" media="screen">
		<!-- end: CSS REQUIRED FOR THIS PAGE ONLY -->
	</head>
	<!-- end: HEAD -->
	<body>
		<div id="app">
			<!-- sidebar -->
			<div class="sidebar app-aside" id="sidebar">
				<div class="sidebar-container perfect-scrollbar">
					<nav>
						<!-- start: SEARCH FORM -->
						<div class="search-form">
							<a class="s-open" href="#">
								<i class="ti-search"></i>
							</a>
							<form class="navbar-form" role="search">
								<a class="s-remove" href="#" target=".navbar-form">
									<i class="ti-close"></i>
								</a>
								<div class="form-group">
									<input type="text" class="form-control" placeholder="Search...">
									<button class="btn search-button" type="submit">
										<i class="ti-search"></i>
									</button>
								</div>
							</form>
						</div>
						<!-- end: SEARCH FORM -->
						<!-- start: MAIN NAVIGATION MENU -->
						<div class="navbar-title">
							<span>Main Navigation</span>
						</div>
						<ul class="main-navigation-menu">
							<li>
								<a href="index.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-home"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Dashboard </span>
										</div>
									</div>
								</a>
							</li>
							<li class="active open">
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-settings"></i>
										</div>
										<div class="item-inner">
											<span class="title"> UI Elements </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="ui_elements.html">
											<span class="title"> Elements </span>
										</a>
									</li>
									<li class="active">
										<a href="ui_buttons.html">
											<span class="title"> Buttons </span>
										</a>
									</li>
									<li>
										<a href="ui_links.html">
											<span class="title"> Links </span>
										</a>
									</li>
									<li>
										<a href="ui_icons.html">
											<span class="title"> Font Awesome Icons </span>
										</a>
									</li>
									<li>
										<a href="ui_line_icons.html">
											<span class="title"> Linear Icons </span>
										</a>
									</li>
									<li>
										<a href="ui_modals.html">
											<span class="title"> Modals </span>
										</a>
									</li>
									<li>
										<a href="ui_toggle.html">
											<span class="title"> Toggle </span>
										</a>
									</li>
									<li>
										<a href="ui_tabs_accordions.html">
											<span class="title"> Tabs &amp; Accordions </span>
										</a>
									</li>
									<li>
										<a href="ui_panels.html">
											<span class="title"> Panels </span>
										</a>
									</li>
									<li>
										<a href="ui_notifications.html">
											<span class="title"> Notifications </span>
										</a>
									</li>
									<li>
										<a href="ui_treeview.html">
											<span class="title"> Treeview </span>
										</a>
									</li>
									<li>
										<a href="ui_media.html">
											<span class="title"> Media Object </span>
										</a>
									</li>
									<li>
										<a href="ui_nestable.html">
											<span class="title"> Nestable List </span>
										</a>
									</li>
									<li>
										<a href="ui_typography.html">
											<span class="title"> Typography </span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-layout-grid2"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Tables </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="table_basic.html">
											<span class="title">Basic Tables</span>
										</a>
									</li>
									<li>
										<a href="table_responsive.html">
											<span class="title">Responsive Tables</span>
										</a>
									</li>
									<li>
										<a href="table_data.html">
											<span class="title">Advanced Data Tables</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-pencil-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Forms </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="form_elements.html">
											<span class="title">Form Elements</span>
										</a>
									</li>									
									<li>
										<a href="form_text_editor.html">
											<span class="title">Text Editor</span>
										</a>
									</li>
									<li>
										<a href="form_wizard.html">
											<span class="title">Form Wizard</span>
										</a>
									</li>
									<li>
										<a href="form_validation.html">
											<span class="title">Form Validation</span>
										</a>
									</li>
									<li>
										<a href="form_image_cropping.html">
											<span class="title">Image Cropping</span>
										</a>
									</li>
									<li>
										<a href="form_multiple_upload.html">
											<span class="title">Multiple File Upload</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-user"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Login </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="login_signin.html">
											<span class="title"> Login Form </span>
										</a>
									</li>
									<li>
										<a href="login_registration.html">
											<span class="title"> Registration Form </span>
										</a>
									</li>
									<li>
										<a href="login_forgot.html">
											<span class="title"> Forgot Password Form </span>
										</a>
									</li>
									<li>
										<a href="login_lockscreen.html">
											<span class="title">Lock Screen</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-layers-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Pages </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="pages_user_profile.html">
											<span class="title">User Profile</span>
										</a>
									</li>
									<li>
										<a href="pages_invoice.html">
											<span class="title">Invoice</span>
										</a>
									</li>
									<li>
										<a href="pages_timeline.html">
											<span class="title">Timeline</span>
										</a>
									</li>
									<li>
										<a href="pages_calendar.html">
											<span class="title">Calendar</span>
										</a>
									</li>
									<li>
										<a href="pages_messages.html">
											<span class="title">Messages</span>
										</a>
									</li>
									<li>
										<a href="pages_blank_page.html">
											<span class="title">Blank Page</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-package"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Utilities </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="utilities_search_result.html">
											<span class="title">Search Results</span>
										</a>
									</li>
									<li>
										<a href="utilities_error_404.html">
											<span class="title">Error 404</span>
										</a>
									</li>
									<li>
										<a href="utilities_error_500.html">
											<span class="title">Error 500</span>
										</a>
									</li>
									<li>
										<a href="utilities_pricing_table.html">
											<span class="title">Pricing Table</span>
										</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-folder"></i>
										</div>
										<div class="item-inner">
											<span class="title"> 3 Level Menu </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											<span>Item 1</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 2</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 3</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="#">
													Sample Link 1
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 2
												</a>
											</li>
											<li>
												<a href="#">
													Sample Link 3
												</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="javascript:void(0)">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-menu-alt"></i>
										</div>
										<div class="item-inner">
											<span class="title"> 4 Level Menu </span><i class="icon-arrow"></i>
										</div>
									</div>
								</a>
								<ul class="sub-menu">
									<li>
										<a href="javascript:;">
											<span>Item 1</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 2</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
									<li>
										<a href="javascript:;">
											<span>Item 3</span> <i class="icon-arrow"></i>
										</a>
										<ul class="sub-menu">
											<li>
												<a href="javascript:;">
													<span>Sample Link 1</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 2</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
											<li>
												<a href="javascript:;">
													<span>Sample Link 3</span> <i class="icon-arrow"></i>
												</a>
												<ul class="sub-menu">
													<li>
														<a href="#">
															Sample Link 1
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 2
														</a>
													</li>
													<li>
														<a href="#">
															Sample Link 3
														</a>
													</li>
												</ul>
											</li>
										</ul>
									</li>
								</ul>
							</li>
							<li>
								<a href="maps.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-location-pin"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Maps </span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="charts.html">
									<div class="item-content">
										<div class="item-media">
											<i class="ti-pie-chart"></i>
										</div>
										<div class="item-inner">
											<span class="title"> Charts </span>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<!-- end: MAIN NAVIGATION MENU -->
						<!-- start: CORE FEATURES -->
						<div class="navbar-title">
							<span>Core Features</span>
						</div>
						<ul class="folders">
							<li>
								<a href="pages_calendar.html">
									<div class="item-content">
										<div class="item-media">
											<span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse"></i> </span>
										</div>
										<div class="item-inner">
											<span class="title"> Calendar </span>
										</div>
									</div>
								</a>
							</li>
							<li>
								<a href="pages_messages.html">
									<div class="item-content">
										<div class="item-media">
											<span class="fa-stack"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-folder-open-o fa-stack-1x fa-inverse"></i> </span>
										</div>
										<div class="item-inner">
											<span class="title"> Messages </span>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<!-- end: CORE FEATURES -->
						<!-- start: DOCUMENTATION BUTTON -->
						<div class="wrapper">
							<a href="documentation.html" class="button-o">
								<i class="ti-help"></i>
								<span>Documentation</span>
							</a>
						</div>
						<!-- end: DOCUMENTATION BUTTON -->
					</nav>
				</div>
			</div>
			<!-- / sidebar -->
			<div class="app-content">
				<!-- start: TOP NAVBAR -->
				<header class="navbar navbar-default navbar-static-top">
					<!-- start: NAVBAR HEADER -->
					<div class="navbar-header">
						<a href="#" class="sidebar-mobile-toggler pull-right hidden-md hidden-lg" class="btn btn-navbar sidebar-toggle" data-toggle-class="app-slide-off" data-toggle-target="#app" data-toggle-click-outside="#sidebar">
							<i class="ti-align-justify"></i>
						</a>
						<a class="navbar-brand" href="#">
							<img src="assets/images/logo.png" alt="Clip-Two"/>
						</a>
						<a href="#" class="sidebar-toggler pull-left visible-md visible-lg" data-toggle-class="app-sidebar-closed" data-toggle-target="#app">
							<i class="ti-align-justify"></i>
						</a>
						<a class="pull-left menu-toggler visible-xs-block" id="menu-toggler" data-toggle="collapse" href=".navbar-collapse">
							<span class="sr-only">Toggle navigation</span>
							<i class="ti-view-grid"></i>
						</a>
					</div>
					<!-- end: NAVBAR HEADER -->
					<!-- start: NAVBAR COLLAPSE -->
					<div class="navbar-collapse collapse">
						<ul class="nav navbar-right">
							<!-- start: MESSAGES DROPDOWN -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<span class="dot-badge partition-red"></span> <i class="ti-comment"></i> <span>MESSAGES</span>
								</a>
								<ul class="dropdown-menu dropdown-light dropdown-messages dropdown-large">
									<li>
										<span class="dropdown-header"> Unread messages</span>
									</li>
									<li>
										<div class="drop-down-wrapper ps-container">
											<ul>
												<li class="unread">
													<a href="javascript:;" class="unread">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-2.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Nicole Bell</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time"> Just Now</span>
															</div>
														</div>
													</a>
												</li>
												<li>
													<a href="javascript:;" class="unread">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-3.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Steven Thompson</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time">8 hrs</span>
															</div>
														</div>
													</a>
												</li>
												<li>
													<a href="javascript:;">
														<div class="clearfix">
															<div class="thread-image">
																<img src="./assets/images/avatar-5.jpg" alt="">
															</div>
															<div class="thread-content">
																<span class="author">Kenneth Ross</span>
																<span class="preview">Duis mollis, est non commodo luctus, nisi erat porttitor ligula...</span>
																<span class="time">14 hrs</span>
															</div>
														</div>
													</a>
												</li>
											</ul>
										</div>
									</li>
									<li class="view-all">
										<a href="#">
											See All
										</a>
									</li>
								</ul>
							</li>
							<!-- end: MESSAGES DROPDOWN -->
							<!-- start: ACTIVITIES DROPDOWN -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<i class="ti-check-box"></i> <span>ACTIVITIES</span>
								</a>
								<ul class="dropdown-menu dropdown-light dropdown-messages dropdown-large">
									<li>
										<span class="dropdown-header"> You have new notifications</span>
									</li>
									<li>
										<div class="drop-down-wrapper ps-container">
											<div class="list-group no-margin">
												<a class="media list-group-item" href="">
													<img class="img-circle" alt="..." src="assets/images/avatar-1.jpg">
													<span class="media-body block no-margin"> Use awesome animate.css <small class="block text-grey">10 minutes ago</small> </span>
												</a>
												<a class="media list-group-item" href="">
													<span class="media-body block no-margin"> 1.0 initial released <small class="block text-grey">1 hour ago</small> </span>
												</a>
											</div>
										</div>
									</li>
									<li class="view-all">
										<a href="#">
											See All
										</a>
									</li>
								</ul>
							</li>
							<!-- end: ACTIVITIES DROPDOWN -->
							<!-- start: LANGUAGE SWITCHER -->
							<li class="dropdown">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<i class="ti-world"></i> English
								</a>
								<ul role="menu" class="dropdown-menu dropdown-light fadeInUpShort">
									<li>
										<a href="#" class="menu-toggler">
											Deutsch
										</a>
									</li>
									<li>
										<a href="#" class="menu-toggler">
											English
										</a>
									</li>
									<li>
										<a href="#" class="menu-toggler">
											Italiano
										</a>
									</li>
								</ul>
							</li>
							<!-- start: LANGUAGE SWITCHER -->
							<!-- start: USER OPTIONS DROPDOWN -->
							<li class="dropdown current-user">
								<a href class="dropdown-toggle" data-toggle="dropdown">
									<img src="assets/images/avatar-1.jpg" alt="Peter"> <span class="username">Peter <i class="ti-angle-down"></i></i></span>
								</a>
								<ul class="dropdown-menu dropdown-dark">
									<li>
										<a href="pages_user_profile.html">
											My Profile
										</a>
									</li>
									<li>
										<a href="pages_calendar.html">
											My Calendar
										</a>
									</li>
									<li>
										<a hef="pages_messages.html">
											My Messages (3)
										</a>
									</li>
									<li>
										<a href="login_lockscreen.html">
											Lock Screen
										</a>
									</li>
									<li>
										<a href="login_signin.html">
											Log Out
										</a>
									</li>
								</ul>
							</li>
							<!-- end: USER OPTIONS DROPDOWN -->
						</ul>
						<!-- start: MENU TOGGLER FOR MOBILE DEVICES -->
						<div class="close-handle visible-xs-block menu-toggler" data-toggle="collapse" href=".navbar-collapse">
							<div class="arrow-left"></div>
							<div class="arrow-right"></div>
						</div>
						<!-- end: MENU TOGGLER FOR MOBILE DEVICES -->
					</div>
					<a class="dropdown-off-sidebar" data-toggle-class="app-offsidebar-open" data-toggle-target="#app" data-toggle-click-outside="#off-sidebar">
						&nbsp;
					</a>
					<!-- end: NAVBAR COLLAPSE -->
				</header>
				<!-- end: TOP NAVBAR -->
				<div class="main-content" >
					<div class="wrap-content container" id="container">
						<!-- start: PAGE TITLE -->
						<section id="page-title">
							<div class="row">
								<div class="col-sm-8">
									<h1 class="mainTitle">Buttons</h1>
									<span class="mainDescription">Button design is usually a subtle element to a web design, but it can have a significant impact on the overall look and usability of the site. </span>
								</div>
								<ol class="breadcrumb">
									<li>
										<span>UI Elements</span>
									</li>
									<li class="active">
										<span>Buttons</span>
									</li>
								</ol>
							</div>
						</section>
						<!-- end: PAGE TITLE -->
						<!-- start: DEFAULT BUTOONS -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row buttons-widget">
								<div class="col-md-12 margin-bottom-30">
									<h5 class="over-title">Default <span class="text-bold">Buttons</span></h5>
									<p>
										Use the button classes on an <code>&lt;a&gt;</code>, <code>&lt;button&gt;</code>, or <code>&lt;input&gt;</code> element.
									</p>
									<!-- Standard grey button with gradient -->
									<button type="button" class="btn btn-wide btn-default">
										Default
									</button>
									<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
									<button type="button" class="btn btn-wide btn-primary">
										Primary
									</button>
									<!-- Indicates a successful or positive action -->
									<button type="button" class="btn btn-wide btn-success">
										Success
									</button>
									<!-- Contextual button for informational alert messages -->
									<button type="button" class="btn btn-wide btn-info">
										Info
									</button>
									<!-- Indicates caution should be taken with this action -->
									<button type="button" class="btn btn-wide btn-warning">
										Warning
									</button>
									<!-- Indicates a dangerous or potentially negative action -->
									<button type="button" class="btn btn-wide btn-danger">
										Danger
									</button>
								</div>
								<div class="col-md-12">
									<h5 class="over-title">Outlined <span class="text-bold">Buttons</span></h5>
									<p>
										Use the <code>.btn-o</code> class for outlined buttons.
									</p>
									<button type="button" class="btn btn-o btn-wide btn-default">
										Default
									</button>
									<button type="button" class="btn btn-wide btn-o btn-primary">
										Primary
									</button>
									<button type="button" class="btn btn-wide btn-o btn-success">
										Success
									</button>
									<button type="button" class="btn btn-wide btn-o btn-info">
										Info
									</button>
									<button type="button" class="btn btn-wide btn-o btn-warning">
										Warning
									</button>
									<button type="button" class="btn btn-wide  btn-o btn-danger">
										Danger
									</button>
								</div>
							</div>
						</div>
						<!-- end: DEFAULT BUTOONS -->
						<!-- start: COLORFUL BUTOONS -->
						<div class="container-fluid container-fullw">
							<div class="row buttons-widget">
								<div class="col-md-12">
									<h5 class="over-title">Colorful <span class="text-bold">Buttons</span></h5>
									<p>
										Use any of the available button classes to quickly create a styled button.
									</p>
									<p class="text-small">
										Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies &ndash; such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the <code>.sr-only</code> class.
									</p>
									<div class="row">
										<div class="col-sm-4">
											<h5 class="margin-top-30">Azure Button</h5>
											<p class="text-small">
												Add class <code>.btn-azure</code>, <code>.btn-light-azure</code> or <code>.btn-dark-azure</code> to your button.
											</p>
											<button type="button" class="btn btn-wide btn-azure">
												Azure
											</button>
											<button type="button" class="btn btn-wide btn-light-azure">
												Light Azure
											</button>
											<button type="button" class="btn btn-wide btn-dark-azure">
												Dark Azure
											</button>
										</div>
										<div class="col-sm-4">
											<h5 class="margin-top-30">Blue Button</h5>
											<p class="text-small">
												Add class <code>.btn-blue</code>, <code>.btn-light-blue</code> or <code>.btn-dark-blue</code> to your button.
											</p>
											<button type="button" class="btn btn-wide btn-blue">
												Blue
											</button>
											<button type="button" class="btn btn-wide btn-light-blue">
												Light Blue
											</button>
											<button type="button" class="btn btn-wide btn-dark-blue">
												Dark Blue
											</button>
										</div>
										<div class="col-sm-4">
											<h5 class="margin-top-30">Purple Button</h5>
											<p class="text-small">
												Add class <code>.btn-purple</code>, <code>.btn-light-purple</code> or <code>.btn-dark-purple</code> to your button.
											</p>
											<button type="button" class="btn btn-wide btn-purple">
												Purple
											</button>
											<button type="button" class="btn btn-wide btn-light-purple">
												Light Purple
											</button>
											<button type="button" class="btn btn-wide btn-dark-purple">
												Dark Purple
											</button>
										</div>
										<div class="col-sm-4">
											<h5 class="margin-top-30">Red Button</h5>
											<p class="text-small">
												Add class <code>.btn-red</code>, <code>.btn-light-red</code> or <code>.btn-dark-red</code> to your button.
											</p>
											<button type="button" class="btn btn-wide btn-red">
												Red
											</button>
											<button type="button" class="btn btn-wide btn-light-red">
												Light Red
											</button>
											<button type="button" class="btn btn-wide btn-dark-red">
												Dark Red
											</button>
										</div>
										<div class="col-sm-4">
											<h5 class="margin-top-30">Orange Button</h5>
											<p class="text-small">
												Add class <code>.btn-orange</code>, <code>.btn-light-orange</code> or <code>.btn-dark-orange</code> to your button.
											</p>
											<button type="button" class="btn btn-wide btn-orange">
												Orange
											</button>
											<button type="button" class="btn btn-wide btn-light-orange">
												Light Orange
											</button>
											<button type="button" class="btn btn-wide btn-dark-orange">
												Dark Orange
											</button>
										</div>
										<div class="col-sm-4">
											<h5 class="margin-top-30">Yellow Button</h5>
											<p class="text-small">
												Add class <code>.btn-yellow</code>, <code>.btn-light-yellow</code> or <code>.btn-dark-yellow</code> to your button.
											</p>
											<button type="button" class="btn btn-wide btn-yellow">
												Yellow
											</button>
											<button type="button" class="btn btn-wide btn-light-yellow">
												Light Yellow
											</button>
											<button type="button" class="btn btn-wide btn-dark-yellow">
												Dark Yellow
											</button>
										</div>
										<div class="col-sm-4">
											<h5 class="margin-top-30">Green Button</h5>
											<p class="text-small">
												Add class <code>.btn-green</code>, <code>.btn-light-green</code> or <code>.btn-dark-green</code> to your button.
											</p>
											<button type="button" class="btn btn-wide btn-green">
												Green
											</button>
											<button type="button" class="btn btn-wide btn-light-green">
												Light Green
											</button>
											<button type="button" class="btn btn-wide btn-dark-green">
												Dark Green
											</button>
										</div>
										<div class="col-sm-4">
											<h5 class="margin-top-30">Beige Button</h5>
											<p class="text-small">
												Add class <code>.btn-beige</code>, <code>.btn-light-beige</code> or <code>.btn-dark-beige</code> to your button.
											</p>
											<button type="button" class="btn btn-wide btn-beige">
												Beige
											</button>
											<button type="button" class="btn btn-wide btn-light-beige">
												Light Beige
											</button>
											<button type="button" class="btn btn-wide btn-dark-beige">
												Dark Beige
											</button>
										</div>
										<div class="col-sm-4">
											<h5 class="margin-top-30">Grey Button</h5>
											<p class="text-small">
												Add class <code>.btn-grey</code>, <code>.btn-light-grey</code> or <code>.btn-dark-grey</code> to your button.
											</p>
											<button type="button" class="btn btn-wide btn-grey">
												Grey
											</button>
											<button type="button" class="btn btn-wide btn-light-grey">
												Light Grey
											</button>
											<button type="button" class="btn btn-wide btn-dark-grey">
												Dark Grey
											</button>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: COLORFUL BUTOONS -->
						<!-- start: BUTTON OPTIONS -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15"><span class="text-bold">Options</span></h5>
									<p>
										You can change the style and the state of the buttons using minimal markup.
									</p>
									<div class="row buttons-widget">
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Square Buttons
													</div>
												</div>
												<div class="panel-body">
													<p>
														Do you like the square buttons? Add <code> .btn-squared </code>
														to change its shape.
													</p>
													<button type="button" class="btn btn-wide btn-default btn-squared">
														Squared
													</button>
													<button type="button" class="btn btn-wide btn-primary btn-squared btn-o">
														Squared
													</button>
													<button type="button" class="btn btn-wide btn-info btn-squared">
														Squared
													</button>
													<button type="button" class="btn btn-wide btn-success btn-squared">
														Squared <i class="fa fa-angle-right"></i>
													</button>
												</div>
											</div>
										</div>
										<div class="col-sm-6">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Sizes
													</div>
												</div>
												<div class="panel-body">
													<p>
														Fancy larger or smaller buttons? Add <code> .btn-lg </code>
														, <code> .btn-sm </code>
														, or <code> .btn-xs </code>
														for additional sizes.
													</p>
													<p>
														<button type="button" class="btn btn-primary btn-lg">
															Large button
														</button>
													</p>
													<p>
														<button type="button" class="btn btn-primary">
															Default button
														</button>
													</p>
													<p>
														<button type="button" class="btn btn-primary btn-sm">
															Small button
														</button>
													</p>
													<p>
														<button type="button" class="btn btn-primary btn-xs">
															Extra small
														</button>
													</p>
												</div>
											</div>
										</div>
										<div class="col-sm-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Disabled State
													</div>
												</div>
												<div class="panel-body">
													<p>
														Add the <code> disabled </code>
														attribute to <code> &lt;button&gt; </code>
														buttons.
													</p>
													<button type="button" class="btn btn-wide btn-primary" disabled="disabled">
														Disabled
													</button>
													<button type="button" class="btn btn-wide btn-azure" disabled="disabled">
														Disabled
													</button>
													<button type="button" class="btn btn-wide btn-red" disabled="disabled">
														Disabled
													</button>
													<button type="button" class="btn btn-wide btn-green" disabled="disabled">
														Disabled
													</button>
												</div>
											</div>
										</div>
										<div class="col-sm-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Active State
													</div>
												</div>
												<div class="panel-body">
													<p>
														if you need to force the <code>:active</code> appearance, add <code>.active</code>.
													</p>
													<button type="button" class="btn btn-wide btn-primary active">
														Active
													</button>
													<button type="button" class="btn btn-wide btn-azure active">
														Active
													</button>
													<button type="button" class="btn btn-wide btn-red active">
														Active
													</button>
													<button type="button" class="btn btn-wide btn-green active">
														Active
													</button>
												</div>
											</div>
										</div>
										<div class="col-sm-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Block level buttons
													</div>
												</div>
												<div class="panel-body">
													<p>
														Create block level buttons&mdash;those that span the full width of a parent&mdash; by adding <code> .btn-block </code>
														.
													</p>
													<p>
														<button class="btn btn-primary btn-block">
															Block level button
														</button>
													</p>
													<p>
														<div class="btn-group btn-group-justified">
															<a class="btn btn-dark-red" href="javascript:;">
																Tools
															</a>
															<a class="btn btn-dark-green" href="javascript:;">
																Help
															</a>
															<a class="btn btn-dark-blue" href="javascript:;">
																Contact
															</a>
														</div>
													</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: BUTTON OPTIONS -->
						<!-- start: BUTTON GROUPS -->
						<div class="container-fluid container-fullw">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Button <span class="text-bold">Groups</span></h5>
									<p>
										Group a series of buttons together on a single line with the button group.
									</p>
									<div class="row">
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Basic example
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Wrap a series of buttons with <code> .btn </code>
														in <code> .btn-group </code>
														.
													</p>
													<div class="space12">
														<div class="btn-group">
															<a class="btn btn-primary btn-o active" href="javascript:;">
																Tools
															</a>
															<a class="btn btn-primary btn-o hidden-xs" href="javascript:;">
																Settings
															</a>
															<a class="btn btn-primary btn-o" href="javascript:;">
																Help
															</a>
															<a class="btn btn-primary btn-o" href="javascript:;">
																Contact
															</a>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Button toolbar
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.
													</p>
													<div class="space12">
														<div class="btn-toolbar">
															<div aria-label="First group" role="group" class="btn-group">
																<button class="btn btn-primary" type="button">
																	1
																</button>
																<button class="btn btn-primary" type="button">
																	2
																</button>
																<button class="btn btn-primary" type="button">
																	3
																</button>
																<button class="btn btn-primary" type="button">
																	4
																</button>
															</div>
															<div class="btn-group">
																<button class="btn btn-primary" type="button">
																	5
																</button>
																<button class="btn btn-primary" type="button">
																	6
																</button>
																<button class="btn btn-primary" type="button">
																	7
																</button>
															</div>
															<div class="btn-group">
																<button class="btn btn-primary" type="button">
																	8
																</button>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-6 col-lg-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Vertical variation
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Make a set of buttons appear vertically stacked rather than horizontally
													</p>
													<div class="space12">
														<div class="btn-group-vertical">
															<a class="btn btn-wide btn-orange" href="javascript:;">
																Tools
															</a>
															<a class="btn btn-wide btn-orange active" href="javascript:;">
																Settings
															</a>
															<a class="btn btn-wide btn-orange" href="javascript:;">
																Help
															</a>
															<a class="btn btn-wide btn-orange" href="javascript:;">
																Contact
															</a>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: BUTTON GROUPS -->
						<!-- start: DROPDOWN BUTTONS -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Dropdown <span class="text-bold">Buttons</span></h5>
									<p>
										Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.
									</p>
									<!-- Single button -->
									<div class="btn-group">
										<a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
											Button dropdown <span class="caret"></span>
										</a>
										<ul class="dropdown-menu" role="menu">
											<li role="presentation" class="dropdown-header">
												Dropdown header
											</li>
											<li>
												<a href="#">
													Action
												</a>
											</li>
											<li>
												<a href="#">
													Another action
												</a>
											</li>
											<li>
												<a href="#">
													Something else here
												</a>
											</li>
											<li class="divider"></li>
											<li role="presentation" class="dropdown-header">
												Dropdown header
											</li>
											<li>
												<a href="#">
													Separated link
												</a>
											</li>
										</ul>
									</div>
									<!-- Split button -->
									<div class="btn-group">
										<button type="button" class="btn btn-danger">
											Action
										</button>
										<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
											<span class="caret"></span>
										</button>
										<ul class="dropdown-menu" role="menu">
											<li role="presentation" class="dropdown-header">
												Dropdown header
											</li>
											<li>
												<a href="#">
													Action
												</a>
											</li>
											<li>
												<a href="#">
													Another action
												</a>
											</li>
											<li>
												<a href="#">
													Something else here
												</a>
											</li>
											<li class="divider"></li>
											<li role="presentation" class="dropdown-header">
												Dropdown header
											</li>
											<li>
												<a href="#">
													Separated link
												</a>
											</li>
										</ul>
									</div>
									<hr />
									<p>
									<p>
										Dropdown <span class="text-bold"> Different Styles</span>
									</p>
									<div class="btn-group">
										<a class="btn btn-primary btn-o dropdown-toggle" data-toggle="dropdown" href="#">
											Dark Left <span class="caret"></span>
										</a>
										<ul role="menu" class="dropdown-menu dropdown-dark">
											<li>
												<a href="#">
													Action
												</a>
											</li>
											<li>
												<a href="#">
													Another action
												</a>
											</li>
											<li>
												<a href="#">
													Something else here
												</a>
											</li>
										</ul>
									</div>
									<div class="btn-group">
										<a class="btn btn-primary btn-o dropdown-toggle" data-toggle="dropdown" href="#">
											Dark Right <span class="caret"></span>
										</a>
										<ul role="menu" class="dropdown-menu dropdown-dark pull-right">
											<li>
												<a href="#">
													Action
												</a>
											</li>
											<li>
												<a href="#">
													Another action
												</a>
											</li>
											<li>
												<a href="#">
													Something else here
												</a>
											</li>
										</ul>
									</div>
									<div class="btn-group">
										<a class="btn btn-primary btn-o dropdown-toggle" data-toggle="dropdown" href="#">
											Light Left <span class="caret"></span>
										</a>
										<ul role="menu" class="dropdown-menu dropdown-light">
											<li>
												<a href="#">
													Action
												</a>
											</li>
											<li>
												<a href="#">
													Another action
												</a>
											</li>
											<li>
												<a href="#">
													Something else here
												</a>
											</li>
										</ul>
									</div>
									<div class="btn-group">
										<a class="btn btn-primary btn-o dropdown-toggle" data-toggle="dropdown" href="#">
											Light Right <span class="caret"></span>
										</a>
										<ul role="menu" class="dropdown-menu dropdown-light pull-right">
											<li>
												<a href="#">
													Action
												</a>
											</li>
											<li>
												<a href="#">
													Another action
												</a>
											</li>
											<li>
												<a href="#">
													Something else here
												</a>
											</li>
										</ul>
									</div>
									</p>
								</div>
							</div>
						</div>
						<!-- end: DROPDOWN BUTTONS -->
						<!-- start: LOADING INDICATOR -->
						<div class="container-fluid container-fullw">
							<div class="row buttons-widget">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Buttons with <span class="text-bold">loading indicator</span></h5>
									<p>
										Buttons with built-in loading indicators, effectively bridging the gap between action and feedback. <span class="text-bold">Click the buttons to see the effect.</span>
									</p>
									<div class="row">
										<div class="col-sm-6">
											<h5> Expand </h5>
											<p>
												<button data-style="expand-left" class="btn btn-wide btn-primary ladda-button">
													<span class="ladda-label">expand-left</span><span class="ladda-spinner"></span>
												</button>
												<button class="btn btn-wide btn-primary ladda-button" data-style="expand-right">
													<span class="ladda-label">expand-right</span>
												</button>
												<button class="btn btn-wide btn-primary ladda-button" data-style="expand-up">
													<span class="ladda-label">expand-up</span>
												</button>
												<button class="btn btn-wide btn-primary ladda-button" data-style="expand-down">
													<span class="ladda-label">expand-down</span>
												</button>
											</p>
											<h5> Zoom </h5>
											<p>
												<button class="btn btn-wide btn-warning ladda-button" data-style="contract">
													<span class="ladda-label">contract</span>
												</button>
												<button class="btn btn-wide btn-warning ladda-button" data-style="zoom-in">
													<span class="ladda-label">zoom-in</span>
												</button>
												<button class="btn btn-wide btn-warning ladda-button" data-style="zoom-out">
													<span class="ladda-label">zoom-out</span>
												</button>
											</p>
											<h5> Slide </h5>
											<p>
												<button class="btn btn-wide btn-danger ladda-button" data-style="slide-left">
													<span class="ladda-label">slide-left</span>
												</button>
												<button class="btn btn-wide btn-danger ladda-button" data-style="slide-right">
													<span class="ladda-label">slide-right</span>
												</button>
												<button class="btn btn-wide btn-danger ladda-button" data-style="slide-up">
													<span class="ladda-label">slide-up</span>
												</button>
												<button class="btn btn-wide btn-danger ladda-button" data-style="slide-down">
													<span class="ladda-label">slide-down</span>
												</button>
											</p>
										</div>
										<div class="col-sm-6">
											<h5> Built-in progress bar </h5>
											<p class="progress-demo">
												<button class="btn btn-wide btn-primary ladda-button" data-style="expand-right">
													<span class="ladda-label">expand-right</span>
												</button>
												<button class="btn btn-wide btn-primary ladda-button" data-style="expand-left">
													<span class="ladda-label">expand-left</span>
												</button>
												<button class="btn btn-wide btn-primary ladda-button" data-style="contract">
													<span class="ladda-label">contract</span>
												</button>
											</p>
											<h5> Sizes </h5>
											<p class="progress-demo">
												<button class="btn btn-wide btn-info btn-xs ladda-button" data-style="expand-right" data-size="xs">
													<span class="ladda-label">extra small</span>
												</button>
												<button class="btn btn-wide btn-info btn-sm ladda-button" data-style="expand-right" data-size="s">
													<span class="ladda-label">small</span>
												</button>
												<button class="btn btn-wide btn-info btn-lg ladda-button" data-style="expand-right" data-size="l">
													<span class="ladda-label">large</span>
												</button>
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: LOADING INDICATOR -->
						<!-- start: BUTTONS WITH ICONS -->
						<div class="container-fluid container-fullw bg-white">
							<div class="row buttons-widget">
								<div class="col-md-12">
									<h5 class="over-title margin-bottom-15">Buttons with <span class="text-bold">icons</span></h5>
									<p>
										Add icons to your buttons.
									</p>
									<div class="row">
										<div class="col-sm-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Font Awesome
													</div>
												</div>
												<div class="panel-body">
													<p class="text-small">
														Examples to use buttons with font awesome icons.
													</p>
													<p>
														<a class="btn btn-wide btn-primary" href="#"><i class="fa fa-share"></i></a>
														<a class="btn btn-wide btn-red" href="#"><i class="fa fa-times fa fa-white"></i></a>
														<a class="btn btn-wide btn-blue" href="#"><i class="fa fa-arrow-circle-right"></i></a>
														<a class="btn btn-wide btn-green" href="#"><i class="fa fa-user fa fa-white"></i></a>
													</p>
													<p class="text-small">
														Buttons with both text and font awesome icon.
													</p>
													<p>
														<a class="btn btn-wide btn-red" href="#"><i class="fa fa-trash-o"></i> Delete Item</a>
														<a class="btn btn-wide btn-primary" href="#"><i class="fa fa-plus"></i> Add Item</a>
														<a class="btn btn-wide btn-purple">
															Listen <i class="fa fa-headphones"></i>
														</a>
														<a class="btn btn-wide btn-blue" href="#"><i class="fa fa-plus"></i> Submit Entry</a>
													</p>
													<p>
														Toolbar made with font awesome icons.
													</p>
													<div class="space12">
														<div class="btn-group">
															<button class="btn btn-primary">
																<i class="fa fa-step-backward"></i>
															</button>
															<button class="btn btn-primary">
																<i class="fa fa-backward"></i>
															</button>
															<button class="btn btn-primary">
																<i class="fa fa-play"></i>
															</button>
															<button class="btn btn-primary">
																<i class="fa fa-stop"></i>
															</button>
															<button class="btn btn-primary">
																<i class="fa fa-forward"></i>
															</button>
															<button class="btn btn-primary">
																<i class="fa fa-step-forward"></i>
															</button>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Glyphicons
													</div>
												</div>
												<div class="panel-body">
													<p>
														Examples to use buttons with glyphicon icons.
													</p>
													<p>
														<a class="btn btn-wide btn-primary" href="#"><i class="glyphicon glyphicon-share"></i></a>
														<a class="btn btn-wide btn-red" href="#"><i class="glyphicon glyphicon-remove-circle"></i></a>
														<a class="btn btn-wide btn-blue" href="#"><i class="glyphicon glyphicon-circle-arrow-right"></i></a>
														<a class="btn btn-wide btn-green" href="#"><i class="glyphicon glyphicon-user"></i></a>
													</p>
													<p class="text-small">
														Buttons with both text and glyphicon icon.
													</p>
													<p>
														<a class="btn btn-wide btn-red" href="#"><i class="glyphicon glyphicon-trash"></i> Delete Item</a>
														<a class="btn btn-wide btn-primary" href="#"><i class="glyphicon glyphicon-plus"></i> Add Item</a>
														<a class="btn btn-wide btn-purple">
															Listen <i class="glyphicon glyphicon-headphones"></i>
														</a>
														<a class="btn btn-wide btn-blue" href="#"><i class="glyphicon glyphicon-plus"></i> Submit Entry</a>
													</p>
													<p>
														Toolbar made with glyphicon icons.
													</p>
													<div class="space12">
														<div class="btn-group">
															<button class="btn btn-primary">
																<i class="glyphicon glyphicon-step-backward"></i>
															</button>
															<button class="btn btn-primary">
																<i class="glyphicon glyphicon-backward"></i>
															</button>
															<button class="btn btn-primary">
																<i class="glyphicon glyphicon-play"></i>
															</button>
															<button class="btn btn-primary">
																<i class="glyphicon glyphicon-stop"></i>
															</button>
															<button class="btn btn-primary">
																<i class="glyphicon glyphicon-forward"></i>
															</button>
															<button class="btn btn-primary">
																<i class="glyphicon glyphicon-step-forward"></i>
															</button>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="col-sm-4">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Themify Icons
													</div>
												</div>
												<div class="panel-body">
													<p>
														Examples to use buttons with themify icons.
													</p>
													<p>
														<a class="btn btn-wide btn-primary" href="#"><i class="ti-share"></i></a>
														<a class="btn btn-wide btn-red" href="#"><i class="ti-close"></i></a>
														<a class="btn btn-wide btn-blue" href="#"><i class="ti-arrow-circle-right"></i></a>
														<a class="btn btn-wide btn-green" href="#"><i class="ti-user"></i></a>
													</p>
													<p class="text-small">
														Buttons with both text and themify icon.
													</p>
													<p>
														<a class="btn btn-wide btn-red" href="#"><i class="ti-trash"></i> Delete Item</a>
														<a class="btn btn-wide btn-primary" href="#"><i class="ti-plus"></i> Add Item</a>
														<a class="btn btn-wide btn-purple">
															Listen <i class="ti-headphone"></i>
														</a>
														<a class="btn btn-wide btn-blue" href="#"><i class="ti-plus"></i> Submit Entry</a>
													</p>
													<p>
														Toolbar made with themify icons.
													</p>
													<div class="space12">
														<div class="btn-group">
															<button class="btn btn-primary">
																<i class="ti-control-skip-backward"></i>
															</button>
															<button class="btn btn-primary">
																<i class="ti-control-backward"></i>
															</button>
															<button class="btn btn-primary">
																<i class="ti-control-play"></i>
															</button>
															<button class="btn btn-primary">
																<i class="ti-control-stop"></i>
															</button>
															<button class="btn btn-primary">
																<i class="ti-control-forward"></i>
															</button>
															<button class="btn btn-primary">
																<i class="ti-control-skip-forward"></i>
															</button>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-12">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Animated Buttons
													</div>
												</div>
												<div class="panel-body">
													<p>
														Modern and subtle styles &amp; effects for buttons
													</p>
													<button type="button" class="btn btn-primary btn-wide btn-scroll btn-scroll-top ti-shopping-cart">
														<span>Add to cart</span>
													</button>
													<button type="button" class="btn btn-success btn-wide btn-scroll btn-scroll-left ti-settings">
														<span>Settings</span>
													</button>
													<button type="button" class="btn btn-info btn-wide btn-scroll btn-scroll-top fa fa-heart">
														<span>Love</span>
													</button>
													<button type="button" class="btn btn-danger btn-wide btn-scroll btn-scroll-left fa fa-truck">
														<span>Truck</span>
													</button>
												</div>
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-sm-12">
											<div class="panel panel-transparent">
												<div class="panel-heading">
													<div class="panel-title">
														Social List
													</div>
												</div>
												<div class="panel-body">
													<div class="social-icons">
														<ul>
															<li class="social-twitter" tooltip="Twitter" tooltip-placement="top">
																<a target="_blank" href="#">
																	Twitter
																</a>
															</li>
															<li class="social-dribbble" tooltip="Dribbble" tooltip-placement="top">
																<a target="_blank" href="#">
																	Dribbble
																</a>
															</li>
															<li class="social-facebook" tooltip="Facebook" tooltip-placement="top">
																<a target="_blank" href="#">
																	Facebook
																</a>
															</li>
															<li class="social-google" tooltip="Google" tooltip-placement="top">
																<a target="_blank" href="#">
																	Google+
																</a>
															</li>
															<li class="social-linkedin" tooltip="LinkedIn" tooltip-placement="top">
																<a target="_blank" href="#">
																	LinkedIn
																</a>
															</li>
															<li class="social-youtube" tooltip="YouTube" tooltip-placement="top">
																<a target="_blank" href="#">
																	YouTube
																</a>
															</li>
															<li class="social-rss" tooltip="RSS" tooltip-placement="top">
																<a target="_blank" href="#" >
																	RSS
																</a>
															</li>
															<li class="social-behance" tooltip="Behance" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Behance
																</a>
															</li>
															<li class="social-dropbox" tooltip="Dropbox" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Dropbox
																</a>
															</li>
															<li class="social-github" tooltip="Github" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Github
																</a>
															</li>
															<li class="social-spotify" tooltip="Spotify" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Spotify
																</a>
															</li>
															<li class="social-stumbleupon" tooltip="Stumbleupon" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Stumbleupon
																</a>
															</li>
															<li class="social-skype" tooltip="Skype" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Skype
																</a>
															</li>
															<li class="social-tumblr" tooltip="Tumblr" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Tumblr
																</a>
															</li>
															<li class="social-spotify" tooltip="Spotify" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Spotify
																</a>
															</li>
															<li class="social-vimeo" tooltip="Vimeo" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Vimeo
																</a>
															</li>
															<li class="social-wordpress" tooltip="Wordpress" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Wordpress
																</a>
															</li>
															<li class="social-xing" tooltip="Xing" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Xing
																</a>
															</li>
															<li class="social-yahoo" tooltip="Yahoo" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Yahoo
																</a>
															</li>
															<li class="social-vk" tooltip="VK" tooltip-placement="top">
																<a target="_blank" href="#" >
																	VK
																</a>
															</li>
															<li class="social-instagram" tooltip="Instagram" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Instagram
																</a>
															</li>
															<li class="social-reddit" tooltip="Reddit" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Reddit
																</a>
															</li>
															<li class="social-flickr" tooltip="Flickr" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Flickr
																</a>
															</li>
															<li class="social-foursquare" tooltip="Foursquare" tooltip-placement="top">
																<a target="_blank" href="#" >
																	Foursquare
																</a>
															</li>
														</ul>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<!-- end: BUTTONS WITH ICONS -->
					</div>
				</div>
			</div>
			<!-- start: FOOTER -->
			<footer>
				<div class="footer-inner">
					<div class="pull-right">
						&copy; <span class="current-year"></span><span class="text-bold text-uppercase">ClipTheme</span>. <span>All rights reserved</span>
					</div>
					<div class="pull-left">
						<span class="go-top"><i class="ti-angle-up"></i></span>
					</div>
				</div>
			</footer>
			<!-- end: FOOTER -->
			<!-- start: OFF-SIDEBAR -->
			<div id="off-sidebar" class="sidebar">
				<div class="sidebar-wrapper">
					<ul class="nav nav-tabs nav-justified">
						<li class="active">
							<a href="#off-users" aria-controls="off-users" role="tab" data-toggle="tab">
								<i class="ti-comments"></i>
							</a>
						</li>
						<li>
							<a href="#off-favorites" aria-controls="off-favorites" role="tab" data-toggle="tab">
								<i class="ti-heart"></i>
							</a>
						</li>
						<li>
							<a href="#off-settings" aria-controls="off-settings" role="tab" data-toggle="tab">
								<i class="ti-settings"></i>
							</a>
						</li>
					</ul>
					<div class="tab-content">
						<div role="tabpanel" class="tab-pane active" id="off-users">
							<div id="users" toggleable active-class="chat-open">
								<div class="users-list">
									<div class="sidebar-content perfect-scrollbar">
										<h5 class="sidebar-title">On-line</h5>
										<ul class="media-list">
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-2.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Nicole Bell</h4>
														<span> Content Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<div class="user-label">
														<span class="label label-success">3</span>
													</div>
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-3.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Steven Thompson</h4>
														<span> Visual Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-4.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<i class="fa fa-circle status-online"></i>
													<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
										</ul>
										<h5 class="sidebar-title">Off-line</h5>
										<ul class="media-list">
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-6.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Nicole Bell</h4>
														<span> Content Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<div class="user-label">
														<span class="label label-success">3</span>
													</div>
													<img alt="..." src="assets/images/avatar-7.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Steven Thompson</h4>
														<span> Visual Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-8.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-9.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-10.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Ella Patterson</h4>
														<span> Web Editor </span>
													</div>
												</a>
											</li>
											<li class="media">
												<a data-toggle-class="chat-open" data-toggle-target="#users" href="#">
													<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
													<div class="media-body">
														<h4 class="media-heading">Kenneth Ross</h4>
														<span> Senior Designer </span>
													</div>
												</a>
											</li>
										</ul>
									</div>
								</div>
								<div class="user-chat">
									<div class="chat-content">
										<div class="sidebar-content perfect-scrollbar">
											<a class="sidebar-back pull-left" href="#" data-toggle-class="chat-open" data-toggle-target="#users"><i class="ti-angle-left"></i> <span>Back</span></a>
											<ol class="discussion">
												<li class="messages-date">
													Sunday, Feb 9, 12:58
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Hi, Nicole
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															How are you?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Hi, i am good
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Glad to see you ;)
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Sunday, Feb 9, 13:10
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															What do you think about my new Dashboard?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Sunday, Feb 9, 15:28
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Alo...
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Are you there?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															Hi, i am here
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Your Dashboard is great
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="messages-date">
													Friday, Feb 7, 23:39
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															How does the binding and digesting work in AngularJS?, Peter?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															oh that's your question?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															little reduntant, no?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															literally we get the question daily
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															I know. I, however, am not a nerd, and want to know
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="self">
													<div class="message">
														<div class="message-name">
															Peter Clark
														</div>
														<div class="message-text">
															for this type of question, wouldn't it be better to try Google?
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-1.jpg" alt="">
														</div>
													</div>
												</li>
												<li class="other">
													<div class="message">
														<div class="message-name">
															Nicole Bell
														</div>
														<div class="message-text">
															Lucky for us :)
														</div>
														<div class="message-avatar">
															<img src="assets/images/avatar-2.jpg" alt="">
														</div>
													</div>
												</li>
											</ol>
										</div>
									</div>
									<div class="message-bar">
										<div class="message-inner">
											<a class="link icon-only" href="#"><i class="fa fa-camera"></i></a>
											<div class="message-area">
												<textarea placeholder="Message"></textarea>
											</div>
											<a class="link" href="#">
												Send
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="off-favorites">
							<div class="users-list">
								<div class="sidebar-content perfect-scrollbar">
									<h5 class="sidebar-title">Favorites</h5>
									<ul class="media-list">
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-7.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Nicole Bell</h4>
													<span> Content Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<div class="user-label">
													<span class="label label-success">3</span>
												</div>
												<img alt="..." src="assets/images/avatar-6.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Steven Thompson</h4>
													<span> Visual Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-10.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Ella Patterson</h4>
													<span> Web Editor </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-2.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Kenneth Ross</h4>
													<span> Senior Designer </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-4.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Ella Patterson</h4>
													<span> Web Editor </span>
												</div>
											</a>
										</li>
										<li class="media">
											<a href="#">
												<img alt="..." src="assets/images/avatar-5.jpg" class="media-object">
												<div class="media-body">
													<h4 class="media-heading">Kenneth Ross</h4>
													<span> Senior Designer </span>
												</div>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane" id="off-settings">
							<div class="sidebar-content perfect-scrollbar">
								<h5 class="sidebar-title">General Settings</h5>
								<ul class="media-list">
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Enable Notifications</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Show your E-mail</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">Show Offline Users</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" checked />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">E-mail Alerts</span>
										</div>
									</li>
									<li class="media">
										<div class="padding-10">
											<div class="display-table-cell">
												<input type="checkbox" class="js-switch" />
											</div>
											<span class="display-table-cell vertical-align-middle padding-left-10">SMS Alerts</span>
										</div>
									</li>
								</ul>
								<div class="save-options">
									<button class="btn btn-success">
										<i class="icon-settings"></i><span>Save Changes</span>
									</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- end: OFF-SIDEBAR -->
			<!-- start: SETTINGS -->
			<div class="settings panel panel-default hidden-xs hidden-sm" id="settings">
				<button ct-toggle="toggle" data-toggle-class="active" data-toggle-target="#settings" class="btn btn-default">
					<i class="fa fa-spin fa-gear"></i>
				</button>
				<div class="panel-heading">
					Style Selector
				</div>
				<div class="panel-body">
					<!-- start: FIXED HEADER -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left"> Fixed header</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-header" />
						</span>
					</div>
					<!-- end: FIXED HEADER -->
					<!-- start: FIXED SIDEBAR -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Fixed sidebar</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-sidebar" />
						</span>
					</div>
					<!-- end: FIXED SIDEBAR -->
					<!-- start: CLOSED SIDEBAR -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Closed sidebar</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="closed-sidebar" />
						</span>
					</div>
					<!-- end: CLOSED SIDEBAR -->
					<!-- start: FIXED FOOTER -->
					<div class="setting-box clearfix">
						<span class="setting-title pull-left">Fixed footer</span>
						<span class="setting-switch pull-right">
							<input type="checkbox" class="js-switch" id="fixed-footer" />
						</span>
					</div>
					<!-- end: FIXED FOOTER -->
					<!-- start: THEME SWITCHER -->
					<div class="colors-row setting-box">
						<div class="color-theme theme-1">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-1">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-2">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-2">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<div class="colors-row setting-box">
						<div class="color-theme theme-3">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-3">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-4">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-4">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<div class="colors-row setting-box">
						<div class="color-theme theme-5">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-5">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
						<div class="color-theme theme-6">
							<div class="color-layout">
								<label>
									<input type="radio" name="setting-theme" value="theme-6">
									<span class="ti-check"></span>
									<span class="split header"> <span class="color th-header"></span> <span class="color th-collapse"></span> </span>
									<span class="split"> <span class="color th-sidebar"><i class="element"></i></span> <span class="color th-body"></span> </span>
								</label>
							</div>
						</div>
					</div>
					<!-- end: THEME SWITCHER -->
				</div>
			</div>
			<!-- end: SETTINGS -->
		</div>
		<!-- start: MAIN JAVASCRIPTS -->
		<script src="vendor/jquery/jquery.min.js"></script>
		<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
		<script src="vendor/modernizr/modernizr.js"></script>
		<script src="vendor/jquery-cookie/jquery.cookie.js"></script>
		<script src="vendor/perfect-scrollbar/perfect-scrollbar.min.js"></script>
		<script src="vendor/switchery/switchery.min.js"></script>
		<!-- end: MAIN JAVASCRIPTS -->
		<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<script src="vendor/ladda-bootstrap/spin.min.js"></script>
		<script src="vendor/ladda-bootstrap/ladda.min.js"></script>
		<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
		<!-- start: CLIP-TWO JAVASCRIPTS -->
		<script src="assets/js/main.js"></script>
		<!-- start: JavaScript Event Handlers for this page -->
		<script src="assets/js/ui-buttons.js"></script>
		<script>
			jQuery(document).ready(function() {
				Main.init();
				UIButtons.init();
			});
		</script>
		<!-- end: JavaScript Event Handlers for this page -->
		<!-- end: CLIP-TWO JAVASCRIPTS -->
	</body>
</html>
